<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户组管理</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            overflow: hidden;
        }
        
        .container {
            height: 100vh;
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        

        
                 .main-content {
             flex: 1;
             padding: 0;
             overflow: hidden;
             display: flex;
             flex-direction: column;
         }
        
                 .content-wrapper {
             display: flex;
             gap: 0;
             height: 100%;
         }
        
                 .left-panel {
             width: 400px;
             min-width: 350px;
             background: white;
             border-radius: 0;
             box-shadow: none;
             border: none;
             border-right: 1px solid #e9ecef;
             display: flex;
             flex-direction: column;
             height: 100%;
         }
        
                 .right-panel {
             flex: 1;
             background: white;
             border-radius: 0;
             box-shadow: none;
             border: none;
             display: flex;
             flex-direction: column;
             height: 100%;
         }
        
        .panel-header {
            padding: 15px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .panel-content {
             flex: 1;
             padding: 20px;
             overflow-y: auto;
             overflow-x: hidden;
         }
        
        .group-item {
             padding: 15px;
             border: 1px solid #e9ecef;
             border-radius: 6px;
             margin-bottom: 10px;
             cursor: pointer;
             transition: all 0.2s;
             background: white;
             position: relative;
         }
         
         .group-item:hover {
             border-color: #409eff;
             box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
         }
         
         .group-item.active {
             border-color: #409eff;
             background: #f0f9ff;
         }
         
         .group-actions {
             position: absolute;
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
             display: none;
             gap: 5px;
         }
         
         .group-item:hover .group-actions {
             display: flex;
         }
        
        .group-name {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .group-info {
            font-size: 12px;
            color: #606266;
        }
        
        .permission-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .permission-item:last-child {
            border-bottom: none;
        }
        
        .permission-checkbox {
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .permission-label {
            flex: 1;
            font-size: 14px;
            cursor: pointer;
            user-select: none;
            padding: 4px 0;
        }
        
        .permission-label:hover {
            color: #409eff;
        }
        
        .user-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            margin-bottom: 8px;
            background: white;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #409eff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            margin-right: 10px;
        }
        
        .user-details {
            flex: 1;
        }
        
        .user-name {
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 2px;
        }
        
        .user-code {
            font-size: 12px;
            color: #606266;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #909399;
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #dcdfe6;
        }
        
        .empty-state h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #606266;
        }
        
        .empty-state p {
            margin: 0;
            font-size: 14px;
        }
        
        
        
        /* 滚动条样式 */
        .panel-content::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        .panel-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .panel-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
                 .panel-content::-webkit-scrollbar-thumb:hover {
             background: #a8a8a8;
         }
         
         /* 详情页面左右布局样式 */
         .detail-content {
             display: flex;
             gap: 0;
             height: 100%;
         }
         
        .detail-left-panel, .detail-right-panel {
              flex: 1;
              background: white;
              border-radius: 0;
              border: none;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              height: 100%;
          }
         
         .detail-panel-header {
             padding: 15px 20px;
             background: #f8f9fa;
             border-bottom: 1px solid #e9ecef;
             font-weight: 600;
             color: #2c3e50;
             display: flex;
             justify-content: space-between;
             align-items: center;
             font-size: 14px;
         }
         
         .detail-panel-content {
             padding: 15px;
             overflow-y: auto;
             overflow-x: hidden;
             height: calc(100vh - 100px); /* 确保flex子元素能够正确计算高度 */
         }
         
         /* 详情页面的空状态样式调整 */
         .detail-panel-content .empty-state {
             padding: 30px 15px;
         }
         
         .detail-panel-content .empty-state i {
             font-size: 36px;
             margin-bottom: 15px;
         }
         
         .detail-panel-content .empty-state h3 {
             font-size: 14px;
             margin-bottom: 8px;
         }
         
         .detail-panel-content .empty-state p {
             font-size: 12px;
         }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="container">
            <!-- 主要内容区域 -->
            <div class="main-content">
                <div class="content-wrapper">
                    <!-- 左侧用户组列表 -->
                    <div class="left-panel">
                        <div class="panel-header">
                            <span>用户组列表</span>
                            <div>
                                <el-button type="primary" size="small" @click="showCreateGroupDialog">
                                    <i class="el-icon-plus"></i> 新建
                                </el-button>
                            </div>
                        </div>
                        <div class="panel-content">
                                                         <div v-if="userGroups.length === 0" class="empty-state">
                                 <i class="el-icon-folder-opened"></i>
                                 <h3>暂无用户组</h3>
                                 <p>点击"新建"按钮开始创建</p>
                             </div>
                            <div v-else>
                                                                 <div 
                                     v-for="group in userGroups" 
                                     :key="group.id"
                                     class="group-item"
                                     :class="{ active: selectedGroup && selectedGroup.id === group.id }"
                                     @click="selectGroup(group)"
                                 >
                                     <div class="group-name">{{ group.name }}</div>
                                     <!-- <div class="group-info">
                                         {{ group.users.length }} 个用户 · {{ group.permissions.length }} 个权限
                                     </div> -->
                                     <div class="group-actions">
                                         <el-button 
                                             type="text" 
                                             size="mini" 
                                             @click.stop="editGroup(group)"
                                             style="color: #409eff;"
                                         >
                                             <i class="el-icon-edit"></i>
                                         </el-button>
                                         <el-button 
                                             type="text" 
                                             size="mini" 
                                             @click.stop="deleteGroup(group)"
                                             style="color: #f56c6c;"
                                         >
                                             <i class="el-icon-delete"></i>
                                         </el-button>
                                     </div>
                                 </div>
                            </div>
                        </div>
                    </div>
                    
                                                                                   <!-- 右侧详情 -->
                      <div class="right-panel">
                          <div class="panel-content" style="padding: 0; overflow: hidden;">
                             <div v-if="selectedGroup">
                                 <div class="detail-content">
                                     <!-- 左侧用户列表 -->
                                     <div class="detail-left-panel">
                                         <div class="detail-panel-header">
                                             <span>用户列表</span>
                                             <el-button type="primary" size="small" @click="showAddUserDialog">
                                                 <i class="el-icon-plus"></i> 添加用户
                                             </el-button>
                                         </div>
                                         <div class="detail-panel-content">
                                             <div v-if="selectedGroup.users.length === 0" class="empty-state">
                                                 <i class="el-icon-user"></i>
                                                 <h3>暂无用户</h3>
                                                 <p>点击"添加用户"为该用户组添加成员</p>
                                             </div>
                                             <div v-else>
                                                 <div v-for="user in selectedGroup.users" :key="user.id" class="user-item">
                                                     <div class="user-info">
                                                         <div class="user-avatar">{{ user.name.charAt(0) }}</div>
                                                         <div class="user-details">
                                                             <div class="user-name">{{ user.name }}</div>
                                                             <div class="user-code">{{ user.code }}</div>
                                                         </div>
                                                     </div>
                                                     <el-button 
                                                         type="text" 
                                                         size="small" 
                                                         @click="removeUser(user)"
                                                         style="color: #f56c6c;"
                                                     >
                                                         <i class="el-icon-delete"></i>
                                                     </el-button>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     
                                     <!-- 右侧权限列表 -->
                                     <div class="detail-right-panel">
                                         <div class="detail-panel-header">
                                             <span>Profit Center 权限设置</span>
                                             <div style="display: flex; gap: 8px; align-items: center;">
                                                 <el-button type="text" size="small" @click="selectAllPermissions" style="color: #409eff;">
                                                     <i class="el-icon-check"></i> 全选
                                                 </el-button>
                                                 <el-button type="text" size="small" @click="unselectAllPermissions" style="color: #909399;">
                                                     <i class="el-icon-close"></i> 取消全选
                                                 </el-button>
                                                 <el-button type="primary" size="small" @click="savePermissions">
                                                     <i class="el-icon-check"></i> 保存权限
                                                 </el-button>
                                             </div>
                                         </div>
                                         <div class="detail-panel-content">
                                             <div v-for="permission in selectedGroup.permissions" :key="permission.id" class="permission-item">
                                                 <el-checkbox 
                                                     v-model="permission.enabled" 
                                                     class="permission-checkbox"
                                                 ></el-checkbox>
                                                 <label class="permission-label" @click="permission.enabled = !permission.enabled">
                                                     <strong>{{ permission.division }}</strong> - {{ permission.bu }}
                                                 </label>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                            <div v-else class="empty-state">
                                <i class="el-icon-folder-opened"></i>
                                <h3>请选择用户组</h3>
                                <p>从左侧选择一个用户组查看详情</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 新建/编辑用户组对话框 -->
        <el-dialog 
            :title="isEditing ? '编辑用户组' : '新建用户组'" 
            :visible.sync="groupDialogVisible"
            width="600px"
        >
            <el-form :model="groupForm" :rules="groupRules" ref="groupForm" label-width="100px">
                <el-form-item label="用户组名称" prop="name">
                    <el-input v-model="groupForm.name" placeholder="请输入用户组名称"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input 
                        v-model="groupForm.description" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入用户组描述"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="groupDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveGroup">确定</el-button>
            </div>
        </el-dialog>
        
        <!-- 添加用户对话框 -->
        <el-dialog title="添加用户" :visible.sync="userDialogVisible" width="600px">
            <el-input
                v-model="userSearchKeyword"
                placeholder="搜索用户..."
                prefix-icon="el-icon-search"
                style="margin-bottom: 20px;"
            ></el-input>
            <div style="max-height: 400px; overflow-y: auto;">
                <el-checkbox-group v-model="selectedUsers">
                    <div v-for="user in filteredAvailableUsers" :key="user.id" style="margin-bottom: 10px;">
                        <el-checkbox :label="user.id">
                            <div style="display: flex; align-items: center;">
                                <div class="user-avatar" style="margin-right: 10px;">{{ user.name.charAt(0) }}</div>
                                <div>
                                    <div style="font-weight: 500;">{{ user.name }}</div>
                                    <div style="font-size: 12px; color: #606266;">{{ user.code }}</div>
                                </div>
                            </div>
                        </el-checkbox>
                    </div>
                </el-checkbox-group>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="userDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addUsers">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                                 return {
                     userGroups: [],
                     selectedGroup: null,
                     editingGroup: null, // 用于保存正在编辑的用户组引用
                     groupDialogVisible: false,
                     userDialogVisible: false,
                     isEditing: false,
                     userSearchKeyword: '',
                     selectedUsers: [],
                    
                    groupForm: {
                        name: '',
                        description: ''
                    },
                    
                    groupRules: {
                        name: [
                            { required: true, message: '请输入用户组名称', trigger: 'blur' },
                            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                        ]
                    },
                    
                    // 可用的用户列表
                    availableUsers: [
                        { id: 'emp001', code: '12345', name: '张三' },
                        { id: 'emp002', code: '12346', name: '李四' },
                        { id: 'emp003', code: '12347', name: '王五' },
                        { id: 'emp004', code: '12348', name: '赵六' },
                        { id: 'emp005', code: '12349', name: '临时工A' },
                        { id: 'emp006', code: '12350', name: '陈七' },
                        { id: 'emp007', code: '12351', name: '刘八' },
                        { id: 'emp008', code: '12352', name: '孙九' },
                        { id: 'emp009', code: '12353', name: '周十' },
                        { id: 'emp010', code: '12354', name: '用户A' },
                        { id: 'emp011', code: '12355', name: '用户B' },
                        { id: 'emp012', code: '12356', name: '用户C' },
                        { id: 'emp013', code: '12357', name: '用户D' },
                        { id: 'emp014', code: '12358', name: '用户E' },
                        { id: 'emp015', code: '12359', name: '用户F' },
                        { id: 'emp016', code: '12360', name: '用户G' },
                        { id: 'emp017', code: '12361', name: '用户H' },
                        { id: 'emp018', code: '12362', name: '用户I' },
                        { id: 'emp019', code: '12363', name: '用户J' },
                        { id: 'emp020', code: '12364', name: '用户K' }
                    ],
                    
                    // Profit Center 权限模板
                    profitCenterPermissions: [
                        { id: '1', division: 'Industry', bu: 'Disc Springs TC', enabled: false },
                        { id: '2', division: 'Powertrain', bu: 'Belt Tensioners TC', enabled: false },
                        { id: '3', division: 'Powertrain', bu: 'DAT Tensioners TC', enabled: false },
                        { id: '4', division: 'Powertrain', bu: 'Hose Clamps TC', enabled: false },
                        { id: '5', division: 'Powertrain', bu: 'Tubular Shafts TC', enabled: false },
                        { id: '6', division: 'Powertrain', bu: 'Plant OH TC PTI', enabled: false },
                        { id: '7', division: 'Powertrain', bu: 'Div OH PTI China', enabled: false },
                        { id: '8', division: 'Powertrain', bu: 'E-Powertrain China', enabled: false },
                        { id: '9', division: 'Powertrain', bu: 'Separating Spring TC', enabled: false },
                        { id: '10', division: 'Powertrain', bu: 'Transm. Springs TC', enabled: false },
                        { id: '11', division: 'Powertrain', bu: 'Valve Springs TC', enabled: false },
                        { id: '12', division: 'Toolshop', bu: 'Tool Shop TC', enabled: false },
                        { id: '13', division: 'Tubes', bu: 'MPST Yangzhou', enabled: false },
                        { id: '14', division: 'Tubes', bu: 'ADM Yangzhou', enabled: false },
                        { id: '16', division: 'Chassis', bu: 'Chassis Component KS', enabled: false },
                        { id: '17', division: 'Chassis', bu: 'Plant Overhead KS', enabled: false },
                        { id: '18', division: 'Chassis', bu: 'Coil Springs SY', enabled: false },
                        { id: '19', division: 'Chassis', bu: 'ITW Shenyang', enabled: false },
                        { id: '20', division: 'Chassis', bu: 'Coil Springs TC', enabled: false },
                        { id: '21', division: 'Chassis', bu: 'ITW Taicang', enabled: false },
                        { id: '22', division: 'Chassis', bu: 'CS CN Prototype', enabled: false },
                        { id: '23', division: 'Chassis', bu: 'Plant Overhead SY', enabled: false },
                        { id: '24', division: 'Chassis', bu: 'Plant OH TC Chassis', enabled: false },
                        { id: '25', division: 'Chassis', bu: 'Div OH Chassis China', enabled: false },
                        { id: '26', division: 'Chassis', bu: 'Stabilizer Bars TC', enabled: false },
                        { id: '27', division: 'Chassis', bu: 'ST CN Prototype', enabled: false },
                        { id: '28', division: 'Body', bu: 'Div OH Body China', enabled: false },
                        { id: '29', division: 'Body', bu: 'TRB Taicang', enabled: false },
                        { id: '30', division: 'Body', bu: 'TRPH Shenyang', enabled: false },
                        { id: '31', division: 'Body', bu: 'TRPH Changchun', enabled: false }
                    ]
                }
            },
            computed: {
                filteredAvailableUsers() {
                    if (!this.userSearchKeyword) {
                        return this.availableUsers.filter(user => 
                            !this.selectedGroup || !this.selectedGroup.users.find(u => u.id === user.id)
                        );
                    }
                    return this.availableUsers.filter(user => 
                        (user.name.includes(this.userSearchKeyword) || user.code.includes(this.userSearchKeyword)) &&
                        (!this.selectedGroup || !this.selectedGroup.users.find(u => u.id === user.id))
                    );
                }
            },
            mounted() {
                this.loadUserGroups();
            },
            methods: {
                loadUserGroups() {
                    // 从本地存储加载用户组数据
                    const savedGroups = localStorage.getItem('userGroups');
                    if (savedGroups) {
                        this.userGroups = JSON.parse(savedGroups);
                    } else {
                        // 创建默认用户组
                        this.createDefaultGroups();
                    }
                },
                
                createDefaultGroups() {
                    this.userGroups = [
                        {
                            id: 'group-001',
                            name: '管理员组',
                            description: '系统管理员用户组',
                            users: [
                                { id: 'emp001', code: '12345', name: '张三' },
                                { id: 'emp002', code: '12346', name: '李四' }
                            ],
                            permissions: JSON.parse(JSON.stringify(this.profitCenterPermissions))
                        },
                        {
                            id: 'group-002',
                            name: 'HR用户组',
                            description: 'HR用户组',
                            users: [
                                { id: 'emp003', code: '12347', name: '王五' },
                                { id: 'emp004', code: '12348', name: '赵六' }
                            ],
                            permissions: JSON.parse(JSON.stringify(this.profitCenterPermissions)).map(p => {
                                if (p.division === 'PTI') {
                                    p.enabled = true;
                                }
                                return p;
                            })
                        },
                        {
                            id: 'group-003',
                            name: 'Finance用户组',
                            description: 'Finance用户组',
                            users: [
                                { id: 'emp003', code: '12347', name: '王五' },
                                { id: 'emp004', code: '12348', name: '赵六' }
                            ],
                            permissions: JSON.parse(JSON.stringify(this.profitCenterPermissions)).map(p => {
                                if (p.division === 'PTI') {
                                    p.enabled = true;
                                }
                                return p;
                            })
                        },
                        {
                            id: 'group-004',
                            name: 'PTI-CP用户组',
                            description: 'PTI-CP用户组',
                            users: [
                                { id: 'emp011', code: '12355', name: '盛中华' }
                            ],
                            permissions: JSON.parse(JSON.stringify(this.profitCenterPermissions)).map(p => {
                                if (p.division === 'SVC') {
                                    p.enabled = true;
                                }
                                return p;
                            })
                        }
                    ];
                    this.saveUserGroups();
                },
                
                saveUserGroups() {
                    localStorage.setItem('userGroups', JSON.stringify(this.userGroups));
                },
                
                selectGroup(group) {
                    this.selectedGroup = group;
                },
                
                showCreateGroupDialog() {
                    this.isEditing = false;
                    this.groupForm = {
                        name: '',
                        description: ''
                    };
                    this.groupDialogVisible = true;
                },
                
                                 editGroup(group) {
                     // 如果传入了group参数，使用传入的group；否则使用selectedGroup
                     const targetGroup = group || this.selectedGroup;
                     if (!targetGroup) return;
                     
                     this.isEditing = true;
                     // 保存要编辑的用户组引用，用于后续更新
                     this.editingGroup = targetGroup;
                     this.groupForm = {
                         name: targetGroup.name,
                         description: targetGroup.description || ''
                     };
                     this.groupDialogVisible = true;
                 },
                
                                 saveGroup() {
                     this.$refs.groupForm.validate((valid) => {
                         if (valid) {
                             if (this.isEditing) {
                                 // 编辑现有用户组
                                 if (this.editingGroup) {
                                     this.editingGroup.name = this.groupForm.name;
                                     this.editingGroup.description = this.groupForm.description;
                                     // 如果编辑的是当前选中的用户组，更新选中状态
                                     if (this.selectedGroup && this.selectedGroup.id === this.editingGroup.id) {
                                         this.selectedGroup = this.editingGroup;
                                     }
                                 }
                             } else {
                                 // 创建新用户组
                                 const newGroup = {
                                     id: 'group-' + Date.now(),
                                     name: this.groupForm.name,
                                     description: this.groupForm.description,
                                     users: [],
                                     permissions: JSON.parse(JSON.stringify(this.profitCenterPermissions))
                                 };
                                 this.userGroups.push(newGroup);
                                 this.selectedGroup = newGroup;
                             }
                             
                             this.saveUserGroups();
                             this.groupDialogVisible = false;
                             this.editingGroup = null; // 清空编辑引用
                             this.$message.success(this.isEditing ? '用户组已更新' : '用户组已创建');
                         }
                     });
                 },
                
                                 deleteGroup(group) {
                     // 如果传入了group参数，使用传入的group；否则使用selectedGroup
                     const targetGroup = group || this.selectedGroup;
                     if (!targetGroup) return;
                     
                     this.$confirm('确定要删除用户组 "' + targetGroup.name + '" 吗？', '确认删除', {
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }).then(() => {
                         const index = this.userGroups.findIndex(g => g.id === targetGroup.id);
                         if (index > -1) {
                             this.userGroups.splice(index, 1);
                             // 如果删除的是当前选中的用户组，清空选中状态
                             if (this.selectedGroup && this.selectedGroup.id === targetGroup.id) {
                                 this.selectedGroup = null;
                             }
                             this.saveUserGroups();
                             this.$message.success('用户组已删除');
                         }
                     }).catch(() => {
                         // 用户取消删除
                     });
                 },
                
                showAddUserDialog() {
                    if (!this.selectedGroup) return;
                    
                    this.userSearchKeyword = '';
                    this.selectedUsers = [];
                    this.userDialogVisible = true;
                },
                
                addUsers() {
                    if (!this.selectedGroup || this.selectedUsers.length === 0) {
                        this.userDialogVisible = false;
                        return;
                    }
                    
                    const usersToAdd = this.availableUsers.filter(user => 
                        this.selectedUsers.includes(user.id)
                    );
                    
                    this.selectedGroup.users.push(...usersToAdd);
                    this.saveUserGroups();
                    this.userDialogVisible = false;
                    this.$message.success('用户已添加到用户组');
                },
                
                removeUser(user) {
                    if (!this.selectedGroup) return;
                    
                    this.$confirm('确定要从用户组中移除用户 "' + user.name + '" 吗？', '确认移除', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const index = this.selectedGroup.users.findIndex(u => u.id === user.id);
                        if (index > -1) {
                            this.selectedGroup.users.splice(index, 1);
                            this.saveUserGroups();
                            this.$message.success('用户已从用户组中移除');
                        }
                    }).catch(() => {
                        // 用户取消移除
                    });
                },
                
                savePermissions() {
                    if (!this.selectedGroup) return;
                    
                    this.saveUserGroups();
                    this.$message.success('权限设置已保存');
                },
                
                selectAllPermissions() {
                    if (!this.selectedGroup) return;
                    
                    this.selectedGroup.permissions.forEach(permission => {
                        permission.enabled = true;
                    });
                    this.$message.success('已全选所有权限');
                },
                
                unselectAllPermissions() {
                    if (!this.selectedGroup) return;
                    
                    this.selectedGroup.permissions.forEach(permission => {
                        permission.enabled = false;
                    });
                    this.$message.success('已取消全选');
                },
                
                getActivePermissionsCount() {
                    if (!this.selectedGroup) return 0;
                    return this.selectedGroup.permissions.filter(p => p.enabled).length;
                },
                

            }
        });
    </script>
</body>
</html> 